<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0 ;
				padding: 0;;
			}
			.zhu{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid black;
			}
			canvas{
				border: 1px dashed blue;
				width: 800px;
				height: 600px;
			}
			
		</style>
	</head>
	<body>
		<div class="zhu">
			<canvas id="canvasone" width="1000" height="800"></canvas>
			<input type="button"  id="rightBtn" value="向右" />
			<input type="button"  id="downBtn" value="向下" />
			<input type="button"  id="upBtn" value="向上" />
			<input type="button"  id="leftBtn" value="向左" />
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			let oneCanvas=document.getElementById('canvasone');
			let ppen=oneCanvas.getContext('2d');
			
			//ppen.fillRect(100,100,100,100);
//			
//			ppen.translate(0,50);
//			ppen.fillStyle='red';
//			ppen.fillRect(10,10,100,100);
//			
//			ppen.translate(0,50);
//			ppen.fillStyle='blue';
//			ppen.fillRect(10,10,100,100);
			
//			var rBtn=document.getElementById('rightBtn');
//			rBtn.onclick=function(){
//				move(10,0);
//			}
//			
//			var lBtn=document.getElementById('leftBtn');
//			lBtn.onclick=function(){
//				move(-10,0);
//			}
//			
//			var uBtn=document.getElementById('upBtn');
//			uBtn.onclick=function(){
//				move(0,-10);
//			}
//			
//			var dBtn=document.getElementById('downBtn');
//			dBtn.onclick=function(){
//				move(0,10);
//			}
//			
//			function move(x,y){
//				ppen.clearRect(10,10,200,200);
//				ppen.translate(x,y);
//				ppen.fillRect(100,100,100,100);
//			}
			
//			ppen.scale(2,2);
//			ppen.fillRect(10,10,100,100);
//			ppen.translate(150,150);
//			
//			
//			
//			ppen.rotate(Math.PI/180*45);
//			ppen.fillRect(800,400,100,100);
//			
//			let x=100,y=100,height=100,width=100;
//			setInterval(function(){
//				ppen.translate(x+width/2,y+height/2);
//				ppen.rotate(Math.PI/180*30);
//				ppen.translate(-(x+width/2),-(y+height)/2);
//				ppen.clearRect(0,0,500,500);
//				ppen.fillRect(x,y,width,height);
//			},100)
			
			let x=50,y=50,height=150,width=150;
			setInterval(function(){
				ppen.translate(x + width / 2, y + height / 2);
				ppen.rotate(Math.PI / 180 * 30);
				ppen.translate(-(x + width / 2), -(y + height / 2));
				ppen.clearRect(0,0,300,300);
				ppen.fillRect(x,y,width,height);
			},2000)
			
		 }
		
		
	</script>
</html>
